<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>通讯录</title>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="no-cache"/>
    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css"/>
    <link rel="stylesheet" href="/dist/css/oa-app.css">
    <!-- Bootstrap 3.3.6 -->
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
            font-size: .2rem
        }

        table {
            border-collapse: collapse;
            /*border-right: 1px solid #cbcbcd;*/
            /*border-bottom: 1px solid #cbcbcd;*/
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: -1px !important;
            margin-right: 0px;
        }

        td {
            /*border-top: 1px solid #cbcbcd;
            border-left: 1px solid #cbcbcd;*/
            color: #333;
            font-weight: normal;
            position: relative;
        }

        td.td-value {
            text-align: center !important;
            height: .48rem;
            font-size: .18rem;
        }

        .table {
            width: 100%
        }

        .table .td-title, .table .td-module {
            background-color: #f8f8f8;
            text-align: center;
            line-height: .52rem;
        }

        .table .td-module {
            font-weight: bold;
        }

        .table .td-value span, .table .td-value input[type="text"], .td-value {
            text-align: center !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: #000 !important;
        }

        .box-header {
            line-height: .6rem;
        }

        .pd_1 {
            padding-left: .1rem
        }

        .td-title {
            /*width: 25%*/
        }

        .btn-blue {
            border: none;
            background: #2a8cec;
            color: #fff;
            font-size: 0.22rem;
            height: 0.58rem;
            width: 14%;
        }

        .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
            color: #fff;
            text-decoration: none;
        }

        .formbox {
            padding-left: .02rem;
            padding-top: .1rem
        }

        .red td {
            color: red !important;
        }

        .orange td {
            color: #dfa019 !important;
        }

        .moune {
            padding-right: .08rem;
            color: #2a8cec;
            font-weight: bold
        }

        .lineOne {
            text-align: center;
        }

        .lineOne span {
            max-height: 16px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: center;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .tryStyle {
            width: 34px;
            height: 17px;
            line-height: 17px;
            font-size: 12px;
            top: 0px;
            right: -7px;
            position: absolute;
            border-radius: 50px;
            margin-top: 4px;
            background: #FF0000;
            color: #fff;
            margin-right: -2px;
            transform: scale(0.7);
            text-align: center !important;
        }

        .left {
            text-align: center;
            color: #228bee;
            border-bottom: 2px solid #228bee;
            margin-left: 8px;
            margin-right: 8px;
            padding-bottom: 5px;
        }

        .right {
            text-align: center;
            color: #666666;
            font-size: 12px;
            /*border-bottom: 2px solid #f8f8f8;*/
            margin-left: 4px;
            margin-right: 4px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .slide-box1 {
            display: -webkit-box;
            position: fixed;
            top: 40px;
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            height: 30px;
            width:100%;
            background: #fff;
            z-index: 1111111;
        }

        .fixed-table_body tr td {
            border-right: none;
            border-bottom: 1px;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: yellow;
            font-weight: normal;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table-box td {
            text-align: center;
        }

        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            border-bottom: 1px solid #eeeeee;
        }
        table thead, tbody tr:nth-of-type(even) {
            background: #F9F9F9;
        }

        .tabContent {
            display: flex;
            height: 45px;
            line-height: 45px;
            background: #2a8cec;
            position: fixed;
            top:0px;
            width:100%;
            z-index:1111;
        }

        .tabContentLeft {
            width: 45px;
        }

        .tabContentRight {
            width: 45px;
        }

        .tabContentMiddle {
            background: #2a8cec;
            flex: 1;
            overflow: hidden;
        }

        .tabActive1 {
            font-size: 14px;
            text-align: center;
            color: #2a8cec;
            background-image: url(/dist/img/tabApp.png);
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 50%;
        }

        .tabNo1 {
            text-align: center;
            font-size: 14px;
            color: #fff;
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 50%;
        }
    </style>
</head>
<body>
<section v-cloak id="app">
    <div class="div-td-content-more"><i></i></div>
    <div class="oa-tab-scroll" v-if="companyList&&companyList.length>2">
        <div class="oa-slide ">
            <div v-for="(item,i) in companyList" :class="selectCompany==i? 'tabActive':'tabNo'"
                 @click="selectCompany=i;get_departList(item)">
                {{item.name}}
            </div>
        </div>
    </div>
    <div class="tabContent" v-if="companyList.length<=2">
        <div class="tabContentLeft"></div>
        <div class="tabContentMiddle">
            <div v-for="(item,i) in companyList">
                <span :class="selectCompany==i? 'tabActive1':'tabNo1'"
                      @click="selectCompany=i;get_departList(item)">
                        {{item.name}}
                </span>
            </div>
        </div>
        <div class="tabContentRight"></div>
    </div>
    <!--获取部门-->
    <div class="slide-box1">
        <div v-for="(item,i) in departList" class="right">
            <span :class="selectDepart==i? 'left':'right'" style="height: 30px"
                  @click="selectDepart=i;getUsersByDepartId(item.id)">
                {{item.name}}
            </span>
        </div>
    </div>
    <table width="100%" style="text-align: center;position: fixed;top: 70px;left: 0;width: 100%;z-index: 11111;background: #fff;">
        <thead>
        <tr style="background: #f8f8f8;height: 30px;" >
            <td class="td-title" style="width: 80px;">姓名</td>
            <td class="td-title" style="width: 80px;">电话</td>
            <td class="td-title" style="width: 60px;">小号</td>
            <td class="td-title" style="width: 60px;text-align: left;">部门</td>
            <td class="td-title" style="text-align: left;">职位</td>
        </tr>
        </thead>
    </table>
    <div style="position: relative;margin-top: 103px;padding-bottom: 90px;">
        <table width="100%" >
            <tbody >
            <template v-if="!key">
                <tr v-for="(item,i) in list">
                    <td class="td-value" style="width: 80px" v-if="getQuanXian(item.id)">
                        <span style="color: #2a8cec !important;text-align: left;margin-top: 1px;display: inline-block;vertical-align: middle;height: 24px;line-height: 24px;" @click="lookInfo(item.id)">
                             <template v-if="item.name.length==2" >
                                {{item.name.substring(0,1)}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.name.substring(1,2)}}
                            </template>
                            <template v-else>
                                {{item.name}}
                            </template>
                            <i style="display: inline-block;width: 100%;height: 0;"></i>
                        </span>
                        <span v-if="item.jobState === -2" style="color: #fff !important;"
                              class="tryStyle">试岗</span>
                        <span style="background:#FFA500;color: #fff !important;"
                              v-else-if="item.jobState === -1"
                              class="tryStyle">试用</span>
                        <span v-else></span>
                    </td>
                    <td class="td-value" style="width: 80px;" v-else>
                        <span style="text-align: left;display: inline-block;margin-top: 1px;;vertical-align: middle;height: 24px;line-height: 24px;">
                            <template v-if="item.name.length==2" >
                                {{item.name.substring(0,1)}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.name.substring(1,2)}}
                            </template>
                            <template v-else>
                                {{item.name}}
                            </template>
                            <i style="display: inline-block;width: 100%;height: 0;"></i>
                        </span>
                        <span v-if="item.jobState === -2" style="color: #fff !important;"
                              class="tryStyle">试岗</span>
                        <span style="background:#FFA500;color: #fff !important;"
                              v-else-if="item.jobState === -1"
                              class="tryStyle">试用</span>
                        <span v-else></span>
                    </td>
                    <td class="td-value" style="width: 80px;">
                        <!--<a :href="'tel:'+item.tel" style="color: #2a8cec;">{{item.tel}}</a>-->
                        <span @click="openTel(item.tel)"
                              style="color: #2a8cec !important;">{{item.tel}}</span>
                    </td>
                    <td class="td-value" style="width: 60px;">
                        <!--<a :href="'tel:'+item.tel" style="color: #2a8cec;">{{item.tel}}</a>-->
                        <span @click="openTel(item.trumpet)"
                              style="color: #2a8cec !important;"
                              v-if="item&&item.trumpet.length<=6">{{item.trumpet}}</span>
                    </td>
                    <td class="td-value lineOne" style="width: 60px">
                        <span style="text-align: left !important;;">{{item.departName}}</span>
                    </td>
                    <td class="td-value lineOne" style="">
                        <span style="text-align: left !important;;">{{item.roleName}}</span>
                    </td>
                </tr>
            </template>
            <template v-else>
                <tr v-for="(item,i) in listSearch">
                    <td class="td-value" style="width: 20%;" v-if="getQuanXian(item.id)">
                        <span style="color: #2a8cec !important;text-align: justify;display: inline-block;overflow: hidden;vertical-align: middle;height: 24px;line-height: 24px;width: 35px;" @click="lookInfo(item.id)">
                            {{item.name}}<i style="display: inline-block;width: 100%;height: 0;"></i>
                        </span>
                        <span v-if="item.jobState === -2" style="color: #fff !important;"
                              class="tryStyle">试岗</span>
                        <span style="background:#FFA500;color: #fff !important;"
                              v-else-if="item.jobState === -1"
                              class="tryStyle">试用</span>
                        <span v-else></span>
                    </td>
                    <td class="td-value" v-else>
                        <span style="text-align: justify;display: inline-block;overflow: hidden;vertical-align: middle;height: 24px;line-height: 24px;width: 35px;">
                            {{item.name}}<i style="display: inline-block;width: 100%;height: 0;"></i>
                        </span>
                        <span v-if="item.jobState === -2" style="color: #fff !important;"
                              class="tryStyle">试岗</span>
                        <span style="background:#FFA500;color: #fff !important;"
                              v-else-if="item.jobState === -1"
                              class="tryStyle">试用</span>
                        <span v-else></span>
                    </td>
                    <td class="td-value" style="width: 25%;">
                        <!--<a :href="'tel:'+item.tel" style="color: #2a8cec;">{{item.tel}}</a>-->
                        <span @click="openTel(item.tel)"
                              style="color: #2a8cec !important;">{{item.tel}}</span>
                    </td>
                    <td class="td-value" style="width: 15%;">
                        <!--<a :href="'tel:'+item.tel" style="color: #2a8cec;">{{item.tel}}</a>-->
                        <span @click="openTel(item.trumpet)"
                              style="color: #2a8cec !important;"
                              v-if="item&&item.trumpet.length<=6">{{item.trumpet}}</span>
                    </td>
                    <td class="td-value lineOne" style="width: 15%;">
                        <span style="text-align: left !important;;">{{item.departName}}</span>
                    </td>
                    <td class="td-value lineOne" style="width: 25%;">
                        <span style="text-align: left !important;">{{item.roleName}}</span>
                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <div class="box-header"
         style="text-align: center;position: fixed;bottom: 0;left: 0;width: 100%;height:84px;background-color:white;padding-top:6px;z-index: 11111">
        <div>
            <img src="/dist/img/search.png" style="width: 25px;position:absolute;top: 8px;left: 20px;">
            <input type="text" placeholder="请输入姓名或电话" class="form-control pull-left input-sm"
                   style="width:90%;height: 32px;vertical-align: top;border: 1px solid #cbcbcd;margin-right: 6px;padding-left: 25px;outline: none;margin-left: 4px;"
                   v-model="key" v-on:input="get_search()">
        </div>
        <div>
            <span class="pd_1"> 公司合计：<strong>{{jobStates.companyNum}}</strong>人</span>
            <span class="pd_1"> 部门合计：<strong>{{jobStates.departNum}}</strong>人</span>
        </div>
    </div>

</section>


<!--rem.js-->
<script src="/dist/js/pages/rem/rem.js"></script>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $.ajaxSetup({
        global: true,
        type: "POST",
        cache: false,
        dataType: "json",
        contentType: 'application/json;charset=utf-8',
        beforeSend: function () {
        },
        complete: function () {

        },
        error: function (e) {
            alert('error' + e.responseText);
        }
    });
    $.extend($.wyui, {
        postMethod: function (url, data, callback, sync, id) {
            if (!id) {
                id = "#app"
            }
            $.ajax({
                url: server.ip + url,
                async: sync ? false : true,
                data: JSON.stringify(data),
                beforeSend: function () {

                },
                complete: function () {
                    setTimeout(function () {
                    }, 1000);

                },
                success: function (r) {
                    if (!r.e.code) {
                        callback(r.data.sendData);
                    } else {
                        alert(r.e.desc);
                    }
                },
                error: function (e) {
                    alert(url + e.responseText);
                }
            });
        },
    });
</script>
<script type="text/javascript">
    var query = null;
    var app = new Vue({
        el: '#app',
        data: {
            userId: getUrlParamObj().userId,
            jobState: '',
            jobStates: {},
            key: '',
            list: [],
            list2: [],
            listSearch: [],
            selectCompany: 0,
            selectDepart: 0,
            ip: '',
            companyList: [],
            departList: [],
            appHeight: 0,
            listQX:[]
        },
        methods: {
            //获取列表
            getUsersByDepartId: function (departId) {
                var that = this;
                that.key = '';
                var data = {
                    userId: that.userId,
                    key: '',
                    jobState: "",
                    departId: departId
                };
                $.ajax({
                    url: that.ip + urlConfig.system.user.getContacts,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    beforeSend:function () {
                        var dialog = {
                            dialog: 'show'
                        }
                        prompt(JSON.stringify(dialog))
                    },
                    success: function (r) {
                        var userList=r.data.sendData.records;
                        that.jobStates = r.data.sendData.jobStates;
                        var dialog = {
                            dialog: 'hidden'
                        }
                        if(that.userId !="2017121618514C22B68296F31AF8DDE2") {
                            if (that.listQX.length == 0) {
                                $.wyui.postMethod(urlConfig.system.user.getSubordinateByParentId, {
                                    userId: that.userId
                                }, function (data) {
                                    var ids = [];
                                    that.list2 = data;
                                    for (var i = 0; i < that.list2.length; i++) {
                                        ids.push(that.list2[i].id)
                                    }
                                    that.listQX = ids;
                                    prompt(JSON.stringify(dialog))
                                    that.list = userList;
                                });
                            } else {
                                prompt(JSON.stringify(dialog))
                                that.list = userList;
                            }
                        }else{
                            prompt(JSON.stringify(dialog))
                            that.list = userList;
                        }

                    },
                    error: function (e) {
                        alert(e.responseText)
                        var dialog = {
                            dialog: 'hidden'
                        }
                        prompt(JSON.stringify(dialog))
                    }
                });
            },
            //获取部门
            get_departList: function (item) {
                var that = this;
                if (that.userId == '20181225140445CD827D94AF9A96C367') {
                    if (item.ggxq) {
                        //ggxq
                        that.ip = "http://39.106.135.205/jsyf-oa"
                    } else {
                        //wy
                        that.ip = "http://39.106.158.158:8080/jsyf-oa"
                    }
                }
                $.ajax({
                    url: that.ip + "/depart/getByCompanyId.json",
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify({"companyId": item.id}),
                    success: function (r) {
                        that.departList = r.data.sendData;
                        console.log(r)
                        that.selectDepart = 0;
                        that.getUsersByDepartId(that.departList[0].id);
                    }
                });
            },
            //打开基本信息
            lookInfo: function (id) {
                var that = this;
                var obj = {
                    type: 'lookDetail',
                    url: '/reportForm/personnel/entry.html?userId=' + id,
                    name: '基本信息'
                }
                prompt(JSON.stringify(obj));
            },
            //拨打电话
            openTel: function (tel) {
                var that = this;
                var obj = {
                    type: 'tel',
                    tel: tel
                }
                prompt(JSON.stringify(obj));
            },
            goBack: function () {
                var obj = {
                    activity: 'closePage'
                }
                prompt(JSON.stringify(obj))
            },
            //搜索
            get_search: function () {
                var that = this;
                clearTimeout(query);
                query = setTimeout(function () {
                    $.wyui.postMethod(urlConfig.system.user.getContacts, {
                        key: that.key,
                    }, function (data) {
                        console.log(data)
                        that.listSearch = data.records;
                    });
                }, 2000);
            },
            //阎总要看到滚滚所有
            get_companyGGXQ: function () {
                var that = this;
                $.ajax({
                    url: "http://39.106.135.205/jsyf-oa" + urlConfig.system.company.getCompanyList,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify({userId: "201711271733404C9DA1461F2421F828"}),
                    success: function (r) {
                        console.log(r)
                        var data = r.data.sendData;
                        for (var i = 0; i < data.length; i++) {
                            data[i].ggxq = 1;
                            that.companyList.push(data[i])
                        }
                        that.get_departList(that.companyList[0]);
                    }
                });
            },
            getQuanXian:function (id) {
                if(this.userId=='2017121618514C22B68296F31AF8DDE2'){
                    return true;
                }else{
                    return $.inArray(id,this.listQX) > -1;
                }
            }
        },
        mounted: function () {
            var that = this;
            that.ip = server.ip;
            //获取公司
            $.ajax({
                url: that.ip + urlConfig.system.company.getCompanyList,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify({userId: that.userId}),
                success: function (r) {
                    console.log(r)
//                    var res = JSON.parse(r);
                    if (that.userId == '20181225140445CD827D94AF9A96C367') {
                        <!--阎俊伟 滚滚向前和沃源通讯录都能看到-->
                        that.companyList = r.data.sendData;
                        that.get_companyGGXQ();
                    } else {
                        that.companyList = r.data.sendData;
                        that.get_departList(that.companyList[0]);
                    }
                    that.selectCompany = 0
                    console.log(that.companyList)
                    if (that.companyList.length > 1) {
                        that.appHeight = screen.height - 206;
                    }
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
        }
    });
</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>